<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文章设置</title>
<link href="${rc.contextPath }/js/themes/default/default.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
<!--
body,html{height:100%;}
*{margin:0;padding:0;list-style:none;}
#mainBox{width:100%;}
#right_top{ border:0px solid #c1dcee;height:auto !important;min-height:30px;padding:5px;vertical-align:middle;line-height:30px;}

.tools{margin: 5px; font-style: normal; font-size: 14px; height:25px;}
.tools{text-decoration: none;height: 24px;margin: 0 5px 0 0;background: url('${rc.contextPath}/images/btnout_bg_left.gif') no-repeat left center;float: left;_display: inline;-moz-user-select:none;}
.tools img {margin: 2px 0px 4px 4px;_display: inline;float: left; border: 0px;}
.tools b {cursor:pointer;	white-space: nowrap;color: #666;font-weight: normal;height: 24px;padding:0 3px 0 3px;line-height: 24px;background: url('${rc.contextPath}/images/btnout_bg_right.gif') no-repeat right center;display:inline-block;+zoom: 1;+display: inline;}
.tools:hover {text-decoration: none;background: url('${rc.contextPath}/images/btnover_bg_left.gif') no-repeat left center;}
.tools:hover b {color: #147;background: url('${rc.contextPath}/images/btnover_bg_right.gif') no-repeat right center;}

.table{border-collapse:collapse;border:none;}
.table td{border:solid #c1dcee 1px;  font-size:15px;padding:3px;}
.trHead td{text-align:center;height:22px;background-image: url('${rc.contextPath}/images/td_bg.png');background-repeat: repeat-x;}

.tr td{font-size:13px;text-align:center;}
.tr_hover td{font-size:13px;text-align:center;}
.tr:hover{background-color: #D8F79D}
.tr{background-color: #ffffff}
.tr_hover{background-color: #D8F79D}

.li{float:left;border:1px solid #ccc;background:#EEEEEE;font-size:14px;cursor:pointer;width:100px;height:25px;verticle-align:middle;line-height:25px;text-align:center;margin-left:10px;}
.li_on{background:#ffffff;border-bottom-width: 0px;}

.tab_box_div{border:1px solid #ccc;background:#ffffff;margin-top:-2px;padding-top:10px;border-bottom-width: 0px;border-left-width: 0px;border-right-width: 0px;}

.input_text{width:70%;font-size:16px;background-color:#ffffff;padding:3px;}
-->
</style>
</head>
<body>
<div id="mainBox">
	<div id="right_top">
				<a href="javascript:void(0)" onclick="addClassTypeDialog()"  class="tools" ><img  src="${rc.contextPath }/images/icon002a2.gif"/><b>新建</b></a>
				<a href="javascript:void(0)" onclick="delClassType()" class="tools" ><img  src="${rc.contextPath }/images/icon002a3.gif" /><b>删除</b></a>	
	</div>
	<div >
		<ul class="ul">
			<li id="li1" onclick="changeBox(1,2)" class="li li_on">类型</li>
			<li id="li2" onclick="changeBox(2,1)" class="li">分类</li>
		</ul>
		<div style="clear:both;"></div>
	</div>
	<div id="tab_box_div1" class="tab_box_div">
	<table class="table" width="40%" style="margin-left:10px;">
		<tr class="trHead" >
			<td width="20%"><input type="checkbox" onclick="ckAll(this)" value="1"/></td>
			<td width="20%">编号</td>
			<td width="60%">类型</td>
		</tr>
		<tbody id="class_grid"></tbody>
	</table>	
	</div>
	<div id="tab_box_div2" class="tab_box_div" style="display:none;">
	<table class="table" width="40%" style="margin-right:10px;">
		<tr class="trHead">
			<td width="20%"><input type="checkbox" onclick="ckAll(this)" value="2"/></td>
			<td width="20%">编号</td>
			<td width="60%">分类</td>
		</tr>
		<tbody id="type_grid"></tbody>
	</table>	
	</div>		
</div>
<script type="text/javascript" src="${rc.contextPath }/js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="${rc.contextPath }/js/jquery/jquery.form.js"></script>
<script type="text/javascript" src="${rc.contextPath }/js/jquery/jquery.blockUI.js" charset="utf-8"></script>
<script type="text/javascript" src="${rc.contextPath }/js/kindeditor-min.js" charset="gb2312"></script>
<script type="text/javascript" src="${rc.contextPath}/js/page.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
	loadSource();
});
function loadSource(){
	_waiting._show();
	$.ajax({
		url:'articleSettingSource',
		type:'post',
		dataType:'json',
		success:function(data){
			var classHtml = '',typeHtml = '';
			if(data.classSource != ''){
				$.each(data.classSource,function(i,u){
					var line = '<tr id="class_tr_'+u.id+'" onclick="trck(1,'+u.id+')" class="tr"><td><input id="class'+u.id+'" type="checkbox" name="calss" value="'+u.id+'"/></td>';
						line += '<td>'+eval(i+1)+'</td>';
						line += '<td title="双击进行编辑" id="edit_class'+u.id+'" ondblclick="dblEdit('+u.id+')">'+u.fclassname+'</td>';
						line +='</tr>';
				    classHtml += line;	
				});
			}else{
				classHtml = '<tr><td colspan="3">无数据</td></tr>';
			}
			if(data.typeSource != ''){
				$.each(data.typeSource,function(i,u){
					var line = '<tr id="type_tr_'+u.id+'" onclick="trck(2,'+u.id+')" class="tr"><td><input id="type'+u.id+'" type="checkbox" name="type" value="'+u.id+'"/></td>';
						line += '<td>'+eval(i+1)+'</td>';
						line += '<td title="双击进行编辑" id="edit_type'+u.id+'" ondblclick="dblEdit('+u.id+')">'+u.ftypename+'</td>';
						line +='</tr>';
						typeHtml += line;	
				});
			}else{
				typeHtml = '<tr><td colspan="3">无数据</td></tr>';
			}
			$("#class_grid").html(classHtml);
			$("#type_grid").html(typeHtml);
			_waiting._hide();
		},
		error:function(msg){
			$.growlUI('出错');
			_waiting._hide();
		}
	});
}
var paner = 1;
function changeBox(id,di){
	paner = id;
	$("#li"+id).removeClass();
	$("#li"+di).removeClass();
	$("#li"+id).addClass('li li_on');
	$("#tab_box_div" + id).show();
	$("#li"+di).addClass('li');
	$("#tab_box_div" + di).hide();
}
function ckAll(obj){
	if(obj.checked){
		if(obj.value == 1){
			$("input[type='checkbox'][name='calss']").each(function(){
				$(this).attr('checked',true);
				$("#class_tr_" + $(this).val()).removeClass();
				$("#class_tr_" + $(this).val()).addClass('tr_hover');
			});
		}else{
			$("input[type='checkbox'][name='type']").each(function(){
				$(this).attr('checked',true);
				$("#type_tr_" + $(this).val()).removeClass();
				$("#type_tr_" + $(this).val()).addClass('tr_hover');
			});
		}
	}else{
		if(obj.value == 1){
			$("input[type='checkbox'][name='calss']").each(function(){
				$(this).attr('checked',false);
				$("#class_tr_" + $(this).val()).removeClass();
				$("#class_tr_" + $(this).val()).addClass('tr');
			});
		}else{
			$("input[type='checkbox'][name='type']").each(function(){
				$(this).attr('checked',false);
				$("#type_tr_" + $(this).val()).removeClass();
				$("#type_tr_" + $(this).val()).addClass('tr');
			});
		}
	}
}
function trck(type,id){
	if(type == 1){
		$("input[type='checkbox'][name='calss']").each(function(){
			$(this).attr('checked',false);
			$("#class_tr_" + $(this).val()).removeClass();
			$("#class_tr_" + $(this).val()).addClass('tr');
		});
		$("#class"+id).attr('checked',true);
		$("#class_tr_"+id).removeClass();
		$("#class_tr_"+id).addClass('tr_hover');
	}else{
		$("input[type='checkbox'][name='type']").each(function(){
			$(this).attr('checked',false);
			$("#type_tr_" + $(this).val()).removeClass();
			$("#type_tr_" + $(this).val()).addClass('tr');
		});
		$("#type"+id).attr('checked',true);
		$("#type_tr_"+id).removeClass();
		$("#type_tr_"+id).addClass('tr_hover');
	}
}
function delClassType(){
	var ids = '';
	if($("input[type='checkbox'][name='calss']:checked").size() > 0){
		$("input[type='checkbox'][name='calss']:checked").each(function(){
			ids += ',' + $(this).val();
		});
	}else if($("input[type='checkbox'][name='type']:checked").size() > 0){
		$("input[type='checkbox'][name='type']:checked").each(function(){
			ids += ',' + $(this).val();
		});
	}
	if(ids != ''){
		$.ajax({
			url:'delArticleClass',
			dataType:'json',
			data:{'id':ids,'type':paner},
			type:'post',
			success:function(data){
				$.growlUI('已删除');
				loadSource();
			},
			error:function(msg){
				$.growlUI('出错');
			}
		});
	}else{
		$.growlUI('选项未选中');
	}
}
function addClassTypeDialog(){
	var html = '<table  width="100%"><tr ><td width="30%" style="padding:4px;">选择：</td><td style="padding:4px;"><select id="class_type_se"><option value="1">添加类型</option><option value="2">添加分类</option></select>'
			   + '</td></tr><tr ><td style="padding:4px;">输入名称：</td><td style="padding:4px;"><input class="input_text" type="text" id="classTypeName" /></td></tr></table>';	
	var kdialog = KindEditor.dialog({
		width : 450,
		height: 200,
		title : '文章类型添加',
		body : '<div id="addClass_div" style="padding:10px;height:150px;">'+html+'</div>',
		shadowMode:true,
		closeBtn : {
			name : '关闭',
			click : function(e) {
				kdialog.remove();
			}
		},
		yesBtn : {
			name : '添加',
			click : function(e) {
				if($("#classTypeName").val() != ''){
					var data;
					if($("#class_type_se").val() == 1){
						data = {'fclassname': $("#classTypeName").val()};
					}else{
						data = {'ftypename' : $("#classTypeName").val()};
					}
					$.ajax({
						url:'addArticleClass',
						type:'post',
						data:data,
						dataType:'json',
						success:function(da){
							$.growlUI('添加成功');
							loadSource();
							$("#classTypeName").val('');
						},
						error:function(msg){
							$.growlUI('出错');
						}
					});
				}else{
					$.growlUI('请输入内容');
				}
			}
		},
		noBtn : {
			name : '取消',
			click : function(e) {
				kdialog.remove();
			}
		}
	});
}
function dblEdit(id){
	if(paner == 1){
		var text = $("#edit_class" + id).html();
		if(text.indexOf('<input') == -1){
			$("#edit_class" + id).html('<input onblur="saveUpdate(\''+text+'\',this.value,'+id+')" style="font-size:15px;padding:1px;width:99%;text-align:center;border:0px;background:#ffffff;" type="text" id="edit_class_name" value="'+text+'" />');
			$("#edit_class_name").focus();
		}
	}else{
		var text = $("#edit_type" + id).html();
		if(text.indexOf('<input') == -1){
			$("#edit_type" + id).html('<input onblur="saveUpdate(\''+text+'\',this.value,'+id+')" style="font-size:15px;padding:1px;width:99%;text-align:center;border:0px;background:#ffffff;" type="text" id="edit_type_name" value="'+text+'" />');
			$("#edit_type_name").focus();
		}
	}
}
function saveUpdate(oldText,text,id){
	var data;
	if(paner == 1){
		data = {'id':id,'fclassname':text};
	}else{
		data = {'id':id,'ftypename':text};
	}
	$.ajax({
		url:'updateArticleClass',
		type:'post',
		data:data,
		dataType:'json',
		success:function(da){
			$.growlUI('数据已更新');
			//
			if(paner == 1){
				$("#edit_class"+id).html(text);
			}else{
				$("#edit_type"+id).html(text);
			}
		},
		error:function(msg){
			$.growlUI('出错');
			if(panner = 1){
				$("#edit_class"+id).html(oldText);
			}else{
				$("#edit_type"+id).html(oldText);
			}
		}
	});
}
</script>
</body>
</html>